<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-dialog
    :model-value="powerDialogVisible"
    :title="powerdialogTitle"
    width="50%"
    @close="handleClose"
  >
    <el-tree
      style="max-width: 600px"
      :data="powerList"
      :props="treeProps"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-expanded-keys="defkeys"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch } from 'vue'
import { getPower } from '@/api/roles'
const powerList = ref([])
const defkeys = ref([])
const treeProps = {
  children: 'children',
  label: 'authName'
}
const props = defineProps({
  powerdialogTitle: {
    type: String,
    default: '',
    required: true
  },
  powerdialogTableValue: {
    type: Object,
    default: () => {}
  },
  Powerrow: {
    type: String
  }
})
const Powerrows = ref(props.Powerrow)
const getPowerList = async (row) => {
  const res = await getPower('tree')
  powerList.value = res
  console.log(row)
  const arr = []
  getleafKeys(row, arr)
}
getPowerList(Powerrows)
const getleafKeys = (node, arr) => {
  if (!node.children) {
    arr.push(node.children)
    defkeys.value = arr
  }
  node._rawValue.forEach((item) => {
    getleafKeys(item, arr)
  })
}
watch(
  () => props.powerdialogTableValue,
  () => {
    console.log(props.powerdialogTableValue)
  },
  { deep: true, immediate: true }
)
const emits = defineEmits(['update:modelValue', 'initUserList'])
const handleClose = () => {
  emits('update:modelValue', false)
}
</script>

<style lang="scss" scoped></style>
